<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    <script src="bs/js/jquery.min.js"></script>
    <script src="bs/js/bootstrap.min.js"></script>
    <style>

    *{
        padding: 0;
        margin:0 ;
    }
        .box,.userinput{
            height: 400px;
            width: 800px;
            border:1px solid #333;
            margin:0 auto;
            overflow: auto;
        }

        .userinput{
            height: 180px;
            position: relative;
        }

        .btn-submit{
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .userinput textarea{
            height:146px;
            width: 798px;
            resize:none;
            border: none;
        }


    </style>
</head>
<body>
	<div class="container">

        <div class="form-group" id="usernameinput">
            <label for="">请输入您的名字</label>
            <input type="text" name="" id="username" class="form-control"> 
               <button class="btn btn-block btn-info userinto">确认进入聊天室</button>  
        </div>

        
        <!-- 聊天窗口 -->
        <div class="chat"  hidden="">

            <div class="box">
                <h4 class="text-center">聊天室:当前用户数:<span id="num"></span></h4>
                  
                <div class="chatInfo">
                    
                    
                </div>
           </div>
           <div class="userinput">
                <textarea name=""></textarea>
                <button class="btn btn-success btn-submit">发送</button>
           </div>   
       </div>



    </div>
    
    


</body>
<script>

function websoc(username){

    ws = new WebSocket("ws://192.168.56.153:2345");

    ws.onopen=function(){

       let json={
            user:username,
            once:"once"
        };

        json=JSON.stringify(json);

        ws.send(json);
    }


    ws.onmessage = function(e) {
            
        let str=e.data; //收到的字符串数据

        let json=JSON.parse(str) 

        if(json.once=='once'){ //

            let userCome=`<p class="text-center">用户:${json.user}进入了聊天室</p>`;

            $(".chatInfo").append(userCome);

        }


        if(json.status=='logout'){

              let userCome=`<p class="text-center">用户:${json.user}退出了聊天室</p>`;
               $(".chatInfo").append(userCome);

        }   //用户接收到服务端推送的某用户退出后


        if (json.status=='usersend') {
            
            let usersend=`<p class="text-left">${json.text}</p><br>`;
           $(".chatInfo").append(usersend);

        }


    };

    ws.onclose=function(){  //断开连接时候触发
        
    }


    $(function(){
        $(".btn-submit").click(function(){
            let text=$(".userinput textarea").val();    //获取用户输入的值

            strtext=`用户${username}说:${text}`;

            let json={
                text:strtext,
                once:"no"
            }

            json=JSON.stringify(json);

            ws.send(json);

            $(".userinput textarea").val('');


            // 

            let mysend=`<p class="text-right">${text}</p><br>`
             $(".chatInfo").append(mysend);


        })
    })


}




$(function(){
    $(".userinto").click(function(){
        let username=$("#username").val();
        websoc(username);

        $("#usernameinput").hide();
        $(".chat").show();

    })
})


</script>

</html>